<template>
    <div class="con">
        <div class="left">
            <el-tree :data="shuju" :props="defaultProps" default-expand-all :expand-on-click-node="false" @current-change="dj"></el-tree>

        </div>
        <div class="right">
            <el-tag v-for="item in bookingScheduleList" style="margin: 10px;" @click="xx(item.workDate)">
                {{ item.workDate }} {{ item.dayOfWeek }} {{ item.availableNumber }}/{{ item.reservedNumber }}
            </el-tag>
            <el-pagination
      :current-page.sync="page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size.sync="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
            <el-table border :data="ghxq" v-if="bookingScheduleList.length>0">
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column label="医生" prop="docname"></el-table-column>
                <el-table-column label="职称" prop="title"></el-table-column>
                <el-table-column label="号源时间" prop="workDate"></el-table-column>
                <el-table-column label="总预约数" prop="reservedNumber"></el-table-column>
                <el-table-column label="剩余预约数" prop="availableNumber"></el-table-column>
                <el-table-column label="挂号费(元)" prop="amount"></el-table-column>
                <el-table-column label="擅长技能" prop="skill"></el-table-column>
            </el-table>
        </div>
    </div>
  </template>
  
  <script>
  import {reqkeshi,reqpaibanrq,reqpaibanxx} from "@/api/hospitallist"
  export default {
    name: "Paiban",
    data() {
      return {
        id:'',
        shuju:[],
        defaultProps: {
          children: 'children',
          label: 'depname',
        },
        page:1,
        limit:5,
        bookingScheduleList:[],
        depcode:'',
        ghxq:[],
        total:0
      };
    },
    mounted() {
        
        console.log(this.$route.params.id)
        this.id=this.$route.params.id
        this.getkeshi()
    },
    methods: {
        async getkeshi(){
            try{
                const re = await reqkeshi(this.id)
                console.log(re.data)
                this.shuju=re.data
            }catch(e){

            }
        },
        async dj(a,b){
            if(a.depcode){
                console.log(a.depcode) 
            this.depcode=a.depcode
            }else{
                
            }
            
            try{
                const re = await reqpaibanrq(this.page,this.limit,this.id,this.depcode)
                console.log(re.data,re.data.bookingScheduleList)
                this.bookingScheduleList=re.data.bookingScheduleList
                this.total=re.data.total
            }catch(e){

            }

        },
        async xx(workDate){
            try{
                const re = await reqpaibanxx(this.id,this.depcode,workDate)
                console.log(re.data)
                this.ghxq=re.data
            }catch(e){

            }
        }
        
    },
     watch: {
    page: {
      handler() {
        this.dj(1);
      },
    },
    limit: {
      handler() {
        this.dj(1);
      },
    },
  },
   
  };
  </script>
  
  <style scoped>
    .con{
        display: flex;
        gap: 20px;
        margin: 20px;
    }
    .left{
        height: 100vh;
        width: 15vw;
        overflow-y: scroll;
    }
    .right{
        height: 100px;
    }
  </style>